<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>	    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath %>"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" href="static/css/base.css" media="all">
<link rel="stylesheet" href="static/layui/css/layui.css">
<script src="static/layui/layui.js"></script>
</head>
<body>
	<div class="hp-head1">
		<img alt="" src="static/img/p2.png" class="logo">
		<span class="logo-text">家庭记账本</span>
		<div class="user-info">
			<span>欢迎您，${user.username }</span>&nbsp;&nbsp;
			<a href="login.jsp" style="color: white;">退出</a>
		</div>
	</div>
	<div class="hp-head2">
		<div>
			<div data-url="revenue.jsp">
				<img alt="" src="static/img/p1.png">
				<span>收入</span>	
			</div>
		</div>
		<div>
			<div data-url="expenditure.jsp">
				<img alt="" src="static/img/p3.png">
				<span>支出</span>
			</div>	
		</div>
		<div>
			<div data-url="moneySearch.jsp">
				<img alt="" src="static/img/p4.png">
				<span>资金查询</span>
			</div>	
		</div>
		<div>
			<div data-url="personinfo.jsp">
				<img alt="" src="static/img/p5.png">
				<span>个人信息</span>
			</div>	
		</div>
		<div>
			<div data-url="updatePassword.jsp">
				<img alt="" src="static/img/p6.png">
				<span>修改密码</span>
			</div>	
		</div>
	</div>
	<div class="hp-body">
		<div class="hp-context" >
			
		</div>
	</div>
	<script type="text/javascript">
		layui.use(['jquery'], function(){
			var $ = layui.$;
			
			//菜单点击事件
			$('.hp-head2>div>div').on('click', function() {
				$('.hp-head2>div>div').removeClass("hp-head-check");
				$(this).addClass("hp-head-check");
				$('.hp-context').load($(this).attr("data-url"));
			})
			
			//进入主页自动点击第一个菜单
			$('.hp-head2>div>div:eq(0)').click();
		})
	</script>
</body>
</html>